import 'package:bpb/framework/base/base_page.dart';
import 'package:bpb/framework/utils/date_utils.dart';
import 'package:bpb/pages/all/all_controller.dart';
import 'package:easy_refresh/easy_refresh.dart' as ez;
import 'package:easy_refresh/easy_refresh.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_obx_widget.dart';
import 'package:google_fonts/google_fonts.dart';

import '../../common/CommonData.dart';
import '../../framework/utils/sized_box_util.dart';

class AllPage extends BasePage<AllController> {
  EasyRefreshController easyRefreshController = EasyRefreshController(controlFinishRefresh: true, controlFinishLoad: true);

  @override
  Widget build(BuildContext context) {
    controller.awake();
    return Scaffold(
      backgroundColor: Color(0xffF5F3F1),
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: Text("All Records", style: GoogleFonts.poppins(fontSize: 16.sp, fontWeight: FontWeight.w500, color: Color(0xff333333))),
      ),
      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Obx(() {
                return SizedBox(height: 40.h, child: Center(child: Text("${controller.dateRangeTitle}",style: GoogleFonts.poppins(
                  fontWeight: FontWeight.w400,
                  fontSize: 14.sp,
                  color: Color(0xff333333)
                ),)));
              }),
            ],
          ),
          Expanded(
            child: Container(
              margin: EdgeInsets.only(left: 15.w, right: 15.w),
              child: Obx(() {
                int itemCount = controller.data.length;
                if (itemCount == 0) {
                  return Container(margin: EdgeInsets.all(15.w), child: Column(children: [Text("No data")]));
                }

                return EasyRefresh.builder(
                  header: const ez.ClassicHeader(),
                  footer: const ez.ClassicFooter(),
                  controller: easyRefreshController,
                  onRefresh: () async {
                    // return IndicatorResult.success;
                    onRefresh();
                    easyRefreshController.finishRefresh();
                    easyRefreshController.resetFooter();
                  },
                  onLoad: () async {
                    int addSize = await onLoad();
                    if (addSize != 0) {
                      easyRefreshController.finishLoad(IndicatorResult.success);
                    } else {
                      easyRefreshController.finishLoad(IndicatorResult.noMore);
                    }
                  },
                  childBuilder: (context, physics) {
                    return buildListView(itemCount, physics);
                  },
                );
              }),
            ),
          ),
        ],
      ),
    );
  }

  ListView buildListView(int itemCount, ScrollPhysics? physics) {
    return ListView.separated(
      scrollDirection: Axis.vertical,
      padding: EdgeInsets.zero,
      physics: physics,
      itemBuilder: (ctx, index) {
        var data = controller.data.value[index];

        int sys = (double.parse(data["sys"].toString())).toInt();
        int dia = (double.parse(data["dia"].toString())).toInt();
        int pulse = (double.parse(data["pulse"].toString())).toInt();

        String recordtime = data["recordTime"];
        DateTime dt = DateUtil.DF_YMDHMS.parse(recordtime);
        String showTime = DateUtil.DD_MM_YY_HH_MM.format(dt);

        List<String> levelRange = CommonData.getBloodPressureLevel(sys, dia);
        String level = levelRange[0];

        //    Color bgColor = const Color(0x260F66EB);
        //     Color textColor = const Color(0xff154DA2);
        List<Color> colors = CommonData.getColorByLevel(level);
        Color bgCoolor = colors[0];
        Color textColor = colors[1];

        return Container(
          margin: EdgeInsets.only(top: 10.h),
          padding: EdgeInsets.only(left: 15.w, right: 15.w, top: 20.h, bottom: 20.h),
          width: double.infinity,
          height: 135.h,
          decoration: BoxDecoration(borderRadius: BorderRadius.all(Radius.circular(15.r)), color: Color(0xfffbfbfb)),
          child: Column(
            children: [
              Row(
                children: [
                  Text("${showTime}", style: GoogleFonts.poppins(fontSize: 14.sp, fontWeight: FontWeight.w400, color: Color(0xff747474))),
                  Spacer(),

                  Offstage(
                    offstage: true,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        Container(
                          decoration: BoxDecoration(color: bgCoolor, borderRadius: BorderRadius.circular(50.r)),
                          padding: EdgeInsets.only(top: 6.h, bottom: 6.h),
                          child: Row(
                            children: [
                              sb.w(12.w),
                              ClipOval(child: Container(width: 10.w, height: 10.w, color: textColor)),
                              sb.w(4.w),
                              Container(child: Text("${level}", style: GoogleFonts.poppins(fontSize: 12.sp, fontWeight: FontWeight.w500, color: textColor))),
                              sb.w(12.w),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
              sb.h(5.h),
              Row(
                children: [
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 55.h,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("SYS", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Color(0xff181920), fontSize: 12.sp, height: 1.2)),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Text("${sys}", style: GoogleFonts.poppins(fontSize: 28.sp, fontWeight: FontWeight.w600, color: Color(0xff181920))),
                              Text(" mmHg", style: GoogleFonts.poppins(fontWeight: FontWeight.w400, fontSize: 12.sp, color: Color(0xff181920), height: 2)),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 55.h,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("DIA", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Color(0xff181920), fontSize: 12.sp, height: 1.2)),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Text("${dia}", style: GoogleFonts.poppins(fontSize: 28.sp, fontWeight: FontWeight.w600, color: Color(0xff181920))),
                              Text(" mmHg", style: GoogleFonts.poppins(fontWeight: FontWeight.w400, fontSize: 12.sp, color: Color(0xff181920), height: 2)),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                  Expanded(
                    flex: 1,
                    child: Container(
                      height: 55.h,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            children: [
                              Icon(Icons.favorite, color: Colors.red, size: 14),
                              Text("Pulse", style: GoogleFonts.poppins(fontWeight: FontWeight.w500, color: Color(0xff181920), fontSize: 12.sp, height: 1.2)),
                            ],
                          ),
                          Row(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Text("${pulse}", style: GoogleFonts.poppins(fontSize: 28.sp, fontWeight: FontWeight.w600, color: Color(0xff181920))),
                              Text(" bpm", style: GoogleFonts.poppins(fontWeight: FontWeight.w400, fontSize: 12.sp, color: Color(0xff181920), height: 2)),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        );
      },
      separatorBuilder: (ctx, index) {
        return sb.h(5.h);
      },
      itemCount: itemCount,
    );
  }

  void onRefresh() {
    controller.loadData(true);
  }

  onLoad() async {
    await Future.delayed(Duration(seconds: 1));
    return await controller.loadData(false);
  }
}
